<template>
  <div class="">
    <a-spin tip="加载中..." :spinning="spinning">
      <div v-if="dataList.length == 0" class="Kong">
        <a-empty :image="simpleImage" />
      </div>

      <div v-else class="bottom" ref="scrollRef">
        <div class="bottom-div">
          <div class="item" v-for="(item, index) in dataList" :key="index">
            <div class="item-div">
              <div class="item-div-TiTle">
                <div>
                  <text class="item-Title">{{ item.title }}</text>
                </div>

                <div v-if="canData === 1">
                  <text class="item-time">
                    {{ dayjs(Number(item.createTime)).format('YYYY-MM-DD HH:mm') }}
                  </text>
                  <a-button
                    @click="setReadDou(item)"
                    :loading="item.loadingDu"
                    class="SheDu"
                    size="small"
                  >
                    设为已读
                  </a-button>
                </div>

                <div v-else>
                  <text class="time">
                    {{ dayjs(Number(item.createTime)).format('YYYY-MM-DD HH:mm') }}
                  </text>
                </div>
              </div>

              <div class="item-Mia">
                <div class="item-Mia-Shu-div">
                  <div class="item-Mia-Shu">
                    <text>{{ item.notifyMsg }}</text>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="bottom-Bia">
          <text class="bottom-Bia-Jia" v-if="xianTile === 0">
            正在加载中
            <loading-outlined />
          </text>

          <text class="bottom-Bia-Di" v-else-if="xianTile === 1">已经到底啦~</text>
        </div>
      </div>

      <div v-if="canData === 1 && dataList.length != 0" class="footerBu">
        <a-button
          type="primary"
          style="width: 100%; margin-top: 10px"
          @click="getAll"
          :loading="loadingAllDu"
        >
          全部已读
        </a-button>
      </div>
    </a-spin>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Empty, message } from 'ant-design-vue'
import * as accountApi from '@/api/account'
import dayjs from 'dayjs'
import { useDebounce } from '../../../utils/debounce'

const emit = defineEmits(['refreshFu'])

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const loadingAllDu = ref(false)
const canData = ref()
const scrollRef = ref()

const total = ref(0) // 总条数

const xianTile = ref(-1) // 0: 加载中  1：没有更多了  -1：不显示

const itemInfo = ref({})

const dataCan = ref({
  currentPage: 1,
  pageSize: 5,
})

const spinning = ref(false) // 控制 loading
const dataList = ref([]) as any // 总的数据列表
const dataQia = ref([]) as any // 当前页面 之前的总的数据列表
const dataDang = ref([]) as any // 当前页面的数据列表

const tongGuo = ref(false)

/** 加载数据列表 */
const shows = async (data: string) => {
  // spinning.value = true

  const a = { ...dataCan.value, ...{ status: data } }

  const res = await accountApi.getInformation(a)

  if (res.state == 200) {
    dataDang.value = res.data.list

    dataList.value = [...dataQia.value, ...dataDang.value]

    total.value = Number(res.data.totalCount)

    spinning.value = false

    if (dataDang.value.length < dataCan.value.pageSize && dataList.value.length != 0) {
      xianTile.value = 1

      return
    } else if (dataList.value.length == 0) {
      xianTile.value = -1
      return
    } else {
      xianTile.value = 0
    }

    setTimeout(() => {
      if (tongGuo.value) {
        tongGuo.value = false
        scrollRef.value.addEventListener('scroll', async () => {
          const { scrollTop, offsetHeight, scrollHeight } = scrollRef.value
          // useDebounce(())

          FangDou(scrollTop, offsetHeight, scrollHeight, data)
        })
      }
    })
  } else {
    spinning.value = false
  }
}

const FangDou = useDebounce((scrollTop: any, offsetHeight: any, scrollHeight: any, data: any) => {
  if (scrollTop + offsetHeight + 1 >= scrollHeight) {
    //滚动条到达底部
    if (dataList.value.length < total.value) {
      // 数据为加载完，继续赋值
      xianTile.value = 0
      dataCan.value.currentPage++

      dataQia.value = [...dataQia.value, ...dataDang.value]
      shows(data)
    } else {
      xianTile.value = 1
    }
  }
}, 1000)

/** 设置已读 */
const setRead = async () => {
  // val.loadingDu = true

  const val: any = itemInfo.value

  try {
    const res = await accountApi.getInfoYiDu(val.id)
    if (res.state == 200) {
      const index = dataList.value.findIndex((item: any) => item.id == val.id)

      let a = Number(String((index + 1) / dataCan.value.pageSize).split('.')[0])

      if (String((index + 1) / dataCan.value.pageSize).indexOf('.') !== -1) {
        a = a + 1
      }

      dataQia.value.splice(dataCan.value.pageSize * (a - 1))

      spinning.value = true

      dataCan.value.currentPage = a

      message.success('消息已读成功~')
      await shows(canData.value)
      delete val.loadingDu

      emit('refreshFu', '单独已读')
    } else {
      message.error(res.message)
      delete val.loadingDu
    }
  } catch {
    delete val.loadingDu
  }
}

/** 点击设置已读 */
const setReadDou = (val: any) => {
  val.loadingDu = true

  itemInfo.value = val

  useDebounce(setRead(), 600)
}

/** 点击全部已读 */
const getAll = async () => {
  loadingAllDu.value = false
  try {
    const res = await accountApi.getInfoAllDu()
    if (res.state == 200) {
      message.success('全部消息已读成功~')

      loadingAllDu.value = false

      spinning.value = true
      dataCan.value.currentPage = 1
      shows(canData.value)

      emit('refreshFu', '全部已读')
    } else {
      message.error(res.message)
      loadingAllDu.value = false
    }
  } catch {
    loadingAllDu.value = false
  }
}

const childMethod = (val: string) => {
  spinning.value = true

  tongGuo.value = true

  dataList.value = []
  dataQia.value = []
  dataCan.value.currentPage = 1
  canData.value = val
  xianTile.value = -1

  shows(val)
}

const getChild = () => {
  setTimeout(() => {
    dataList.value = []
    dataQia.value = []
    dataCan.value.currentPage = 1
    xianTile.value = -1
  }, 300)
}

defineExpose({ childMethod, getChild, shows })
</script>
<style lang="less" scoped>
.Kong {
  width: 384px;
}

.footerBu {
  width: 100%;
  border-top: 1px solid #e7e7e7;
}

.time {
  position: absolute;
  opacity: 1;
  bottom: 2px;
  width: 120px;
  right: 0px;
}

.bottom-Bia {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  height: 32px;

  .bottom-Bia-Di {
    color: #7e7e7e;
  }
  .bottom-Bia-Jia {
    color: #1890ff;
  }
}

.item {
  width: 100%;
  min-height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 384px;
  cursor: pointer;
  margin-bottom: 10px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s ease-in;

  .item-div {
    width: 95%;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
  }

  .item-div-TiTle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 26px;

    .item-time {
      // display: flex;
      position: absolute;
      opacity: 1;
      bottom: 2px;
      width: 120px;
      right: 0px;
      -webkit-transition: all 0.2s;
      transition: all 0.2s ease-in;
    }

    .SheDu {
      position: absolute;
      opacity: 0;
      bottom: -15px;
      right: 0px;
      -webkit-transition: all 0.2s;
      transition: all 0.2s ease-in;
    }

    .item-Title {
      font-size: 14px;
      font-weight: bold;
      -webkit-transition: all 0.2s;
      transition: all 0.2s ease-in;
    }
  }

  .item-Mia {
    color: #666666;
    display: flex;
    align-items: center;
    // min-height: 26px;
    justify-content: space-between;
    font-size: 14px;
    // position: relative;
    margin-top: 7px;

    // .item-Mia-Shu-div {
    //   width: 200px;
    // }

    // .item-time {
    //   // display: flex;
    //   position: absolute;
    //   opacity: 1;
    //   bottom: 2px;
    //   width: 120px;
    //   right: 0px;
    //   -webkit-transition: all 0.2s;
    //   transition: all 0.2s ease-in;
    // }
    // .SheDu {
    //   position: absolute;
    //   opacity: 0;
    //   bottom: -20px;
    //   right: 0px;
    //   -webkit-transition: all 0.2s;
    //   transition: all 0.2s ease-in;
    // }
  }
}

.bottom-div :hover {
  .item-Title {
    color: #1890ff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s ease-in;
  }

  .item-time {
    // display: none;
    position: absolute;
    bottom: -15px;
    opacity: 0;
    right: 0px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s ease-in;
  }

  .SheDu {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 2px;
    opacity: 1;
    right: 0px;
    font-size: 12px;
    text-align: center;
    -webkit-transition: all 0.2s;
    transition: all 0.2s ease-in;
  }

  display: flex;
  background-color: #f3f3f3;
  -webkit-transition: all 0.2s;
  transition: all 0.2s ease-in;
}

.bottom {
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
}
</style>
